<!--  -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table :data="article" style="width: 100%">
        <el-table-column label="标题" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总评论数" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.total_comment_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="粉丝评论数">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.fans_comment_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评论状态">
       <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.comment_status">正常</span>
            <span style="margin-left: 10px" v-else>关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
             <template slot-scope="scope">
            <el-switch
                v-model="scope.row.comment_status"
                active-color="#13ce66"
                @change='updateStatus(scope.row)'
                inactive-color="#ff4949">
                </el-switch>
                </template>
        </el-table-column>
      </el-table>
      <el-pagination
      class="footer"
        background
        layout="prev, pager, next"
        :total="total_count"
        :current-page.sync="page"
        @current-change="onCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { getArticle,updateStatus } from "@/api/article";
export default {
  name: "comment",
  data() {
    return {
      article: [],
      tableData: [],
      total_count: null,
      page: 1
    };
  },
  methods: {
    onCurrentChange() {
        this.loadArticle()
    },
    loadArticle() {
      getArticle({
        response_type: "comment",
        page:this.page
      }).then(res => {
        this.article = res.data.data.results;
        this.total_count = res.data.data.total_count;
      });
    },
    updateStatus(item){     
        updateStatus(item.id,item.comment_status).then(res=>{
            this.loadArticle();

            
        })
    }
  },
  created() {
    this.loadArticle();
  }
};
</script>

<style scoped>
.footer{
    margin-top:50px;
}
</style>